<template>
    <el-dialog
        title=""
        :visible.sync="dialogVisible"       
        :before-close="closePanel"
        width="1364px"
        >
        <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="水司详情" name="ssxq">
                    <div class="content ssxq">
                        <div class="ss_picture"></div>
                        <div class="ss_desc">
                            <p>
                                江南水厂始建于1964年，设计规模为3万吨/日的处理量，占地面积20亩，水源为长江水，配套管网约40公里。目前，水厂制水工艺采用常规水处理工艺，包括混凝、沉淀、过滤、消毒以及去除源水中浊度、色度和细菌、病毒为主。江南水厂分为两期建设，一期工程1.5万吨/日，于2011年底投入运行，二期改扩建工程1.5万吨/日，于2021年4月投入试运行，供水区域包括：江安县城主城区、小坝片区、剧专产业园区。
                            </p>
                            <p style='margin-top:15px;'> 
                                该供水厂通过改扩建后，工艺流程完备，水质检测化验等设备设施齐全，自动化程度高，出厂水水质符合国家GB5749-2006饮用水卫生标准。
                            </p>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="工艺流程图" name="gylct">
                    <div class="content gylct">
                        <img src="../../assets/image/modal/gylct.png" alt="">
                    </div>
                </el-tab-pane>
                <el-tab-pane label="组织架构" name="zzjg">
                    <div class="content zzjgt">
                        <img src="../../assets/image/modal/zzjgt.png" alt="">
                    </div>
                </el-tab-pane>
            </el-tabs>
       
    </el-dialog>
</template>

<script>
export default {
    data(){
        return{
            dialogVisible:false,
            activeName:'ssxq'
        }
    },
    props:{
        visiable:Boolean
    },
    created(){
        this.dialogVisible = this.visiable
    },
    methods:{
        closePanel(){
            this.dialogVisible = false;
            this.$emit('closePanel');
            // this.$meit('update:dialogVisible',false);//关闭弹窗
        }
    }
}
</script>

<style lang="less" scoped>
    /deep/.el-dialog{
            background: url('~@/assets/image/modal/scinfo_bg.png') no-repeat;
            height:749px;
            background-size: 100% 100%;
            .el-dialog__footer{
                display: none;
            }
            .el-dialog__footer{
                display: none;
            }
            .el-dialog__headerbtn{
                width: 30px;
                height: 30px;
                background: url('~@/assets/image/modal/close.png') no-repeat;
            }
            .content{
                height: 537px;
                background: url('~@/assets/image/modal/content_bg.png') no-repeat;
                background-size: 100% 100%;
            }
            .ssxq{
                padding: 100px 80px 0px 80px;
                box-sizing: border-box;
                .ss_picture{
                    width: 390px;
                    height: 236px;
                    background: url('~@/assets/image/modal/sc.png') no-repeat;
                    background-size: 100% 100%;
                    float: left;
                }
                .ss_desc{
                    margin-left: 410px;
                    padding-top:50px;
                    width: 695px;
                    font-size: 14px;
                    line-height: 28px;
                    color: #B5BCBE;
                    p{
                        text-indent: 2em;
                    }
                }
            }
            .gylct,.zzjgt{
                display: flex;
                justify-content: center;
                align-items: center;
            }   
        }
    /deep/.el-tabs{
        padding-top: 20px;
        .el-dialog__body{
            padding: 30px 40px;
        }
        .el-tabs__item{
            width: 149px;
            height: 43px;
            font-family: 'Source Han Sans CN';
            font-style: normal;
            font-weight: 400;
            font-size: 22px;
            line-height: 43px;
            color: #95A4AB;
            text-align: center;
            margin-right: 10px;
        }
        .is-top{
            background: url('~@/assets/image/modal/tab_bg.png') no-repeat;
        }
        .is-active{
            background: url('~@/assets/image/modal/activetab_bg.png') no-repeat;
        }
        .el-tabs__active-bar,.el-tabs__nav-wrap::after{
            display: none;
        }
    }
    
</style>